<template>
  <div class="w-full bg-fill-2 p-16 min-h-100">
    <div class="w-full" style="overflow-y: auto">
      <div
        v-for="(item, index) in paramAgg"
        :key="item.id"
        class="grid gap-x-2 gap-y-6 mt-4 grid-cols-6 pb-8"
        :style="{ 'grid-template-columns': 'repeat(3, 1fr) 90px' }"
        style="padding-bottom: 10px"
      >
        <div class="flex items-center">
          <span style="width: 80px;">别名</span>
          <mci-input
            v-model="item.alias"
            placeholder="请输入"
            :min="INPUT_MIN_DATA_NAME"
            :max="INPUT_MAX_DATA_NAME"
            :disabled="props.disabled"
            style="width: calc(100% - 120px); margin-left: 12px;"
          />
        </div>
        <div class="flex items-center">
          <span style="width: 60px;">聚合函数</span>
          <mci-select
            v-model="item.aggFunc"
            :list="fieldTypeOptions"
            placeholder="请选择"
            :disabled="props.disabled"
            style="width: calc(100% - 100px); margin-left: 12px;"
          >
            <mci-option
              v-for="option in fieldTypeOptions"
              :key="option.dictCode"
              :label="option.dictName"
              :value="option.dictCode"
            />
          </mci-select>
        </div>
        <div class="flex items-center">
          <span style="width: 60px;">聚合字段</span>
          <mci-select
            v-model="item.column"
            :list="columnOptions"
            placeholder="请选择"
            style="width: calc(100% - 100px); margin-left: 12px;"
            :disabled="props.disabled"
          >
            <mci-option
              v-for="option in columnOptions"
              :key="option.varName"
              :label="option.varLabel"
              :value="option.varName"
            />
          </mci-select>
        </div>
        <div class="flex items-center">
          <mci-button type="danger" link @click="deleteRow(index)" :disabled="index < 1 || props.disabled"> 删除 </mci-button>
          <mci-button type="danger" link @click="addRow" :disabled="props.disabled"> 添加 </mci-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import { MciButton, MciSelect, MciOption, MciInput } from '@/components/base';
import { type AggColumns } from '@/views/data-source/components/AggModel/components/AggModelAdd/data';
import {
  INPUT_MAX_DATA_NAME,
  INPUT_MIN_DATA_NAME
} from './data';
import { getDictAggFunc, getTableFields } from '@/api/decision-engine';
import type { IGetDictAggFuncRes, IGetTableFieldsReq, IGetTableFieldsRes } from '@/api/decision-engine';

const props = defineProps<{
  tableID: string;
  disabled: boolean;
}>();
watch(
  [() => props.tableID],
  ([newTableID]) => {
    console.log("🚀 ~ newTableID:", newTableID)
    columnRequest(newTableID);
  },
  { deep: true }
);

// 列
const columnOptions = ref<any[]>([]);
// 聚合字段
const fieldTypeOptions = ref<any[]>([]);
// 参数列表
const paramAgg = ref<AggColumns[]>([]);

const deleteRow = (index: number) => {
  paramAgg.value.splice(index, 1);
};

// 初始化
const initData = (parameters?: any) => {
  paramAgg.value = parameters || [];
  !parameters && addRow();
};
// 增加行
const addRow = () => {
  const row: AggColumns = {
    alias: undefined,
    column: undefined,
    aggFunc: undefined,
  };
  paramAgg.value.push(row);
};

// 列
const columnRequest = async (tableID: string) => {
  if (!tableID) return;
  const params: IGetTableFieldsReq = {
    tableName: tableID
  };
  const data: IGetTableFieldsRes = await getTableFields(params);

  if (data) {
    columnOptions.value = data;
  }
};

// 值类型
const fieldTypeRequest = async () => {
  const data: IGetDictAggFuncRes = await getDictAggFunc();

  if (data) {
    fieldTypeOptions.value = data;
  }
};
fieldTypeRequest();

const getData = () => {
  return { aggColumns: paramAgg.value };
};

onMounted(() => {
  initData();
})

defineExpose({
  initData,
  getData,
  addRow
});
</script>
